import React,{Component} from 'react'
import {hashHistory} from 'react-router'
import PropTypes from 'prop-types'
import styles from './style.scss'
import appLogo from 'assets/icons/react_logo.svg'
import Menu from 'bayd/lib/menu'

export default class ComponentList extends Component{
	static propTypes = {
		children: PropTypes.node,
		router: PropTypes.object
	}
	gotoHome = () => {
		hashHistory.push('/')
	}
	changeMenu = (url) => {
		hashHistory.push(url)
	}
	render(){
		const menuList=[
			{
				key:'/componentList/gettingStarted',
				text:'快速开始'
			},
			{
				key:'/componentList/modal',
				text:'Modal弹出框'
			},
			{
				key:'/componentList/chart',
				text:'Chart柱状图'
			}
		]
		return <div className={styles['wrap']}>
			<div className={styles['header-box']} onClick={this.gotoHome}>
				<img src={appLogo}/>
				<div>返回首页</div>
			</div>
			<div className={styles['content-box']}>
				<div className={styles['left']}>
					{/* 设置defaultMenu可以确保每次刷新浏览器，都能自动选中浏览器路径的菜单。 */}
					<Menu menuList={menuList} changeMenu={this.changeMenu} defaultMenu={this.props.router.location.pathname}/>
				</div>
				<div className={styles['right']}>
					{this.props.children}
				</div>
			</div>
		</div>
	}
}